<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆</title>
    <script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<h1>登陆</h1>
<form method="post" action="/login">
    <div>
        用户名：<input type="text" name="username">
    </div>
    <div>
        密　码：<input type="password" name="password">
    </div>
    <div>
        验证码：<input type="text" class="form-control" name="verifyCode" required="required" placeholder="验证码">
        <input id="uuid" type="hidden" name="uuid" />
        <img  id="vCode" title="看不清，请点我" onclick="getVerifyCode()" onmouseover="mouseover(this)" />
    </div>
    <div>
        <label><input type="checkbox" name="remember-me"/>自动登录</label>
    </div>
    <div>
        <button type="submit">立即登陆</button>
    </div>
</form>
<script>
    $(function () {
        getVerifyCode();
    })
    
    function getVerifyCode() {
        var url = "/vCode?"+Math.random();
        $.ajax({
            // 请求方式
            type: "GET",
            // 请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url : url,
            // 请求成功
            success: function (result) {
                console.log(result);
                $("#uuid").val(result.uuid);
                $("#vCode").attr("src","data:image/png;base64," + result.img);
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                console.log(e.status);
                console.log(e.responseText);
            }
        });
    }

    function mouseover(obj) {
        obj.style.cursor = "pointer";
    }
</script>
</body>
</html>